<script setup lang="ts">
// 当前激活的类别
const activeCategory = ref('cloud')
// 当前激活的产品（用于显示描述）
const activeProduct = ref<any>(null)

// 产品类别定义
const categories = [
  {
    id: 'cloud',
    label: '云通讯产品',
    image: '/home/product/cloud.png',
    image_detail: '/home/product/cloud_detail.png'
  },
  {
    id: 'iot',
    label: '物联网',
    image: '/home/product/iot.png',
    image_detail: '/home/product/iot_detail.png'
  },
  {
    id: 'detection',
    label: '号码检测',
    image: '/home/product/detection.png',
    image_detail: '/home/product/detection_detail.png'
  },
  {
    id: 'auth',
    label: '实名认证',
    image: '/home/product/auth.png',
    image_detail: '/home/product/auth_detail.png'
  },
  {
    id: 'risk',
    label: '业务风控',
    image: '/home/product/risk.png',
    image_detail: '/home/product/risk_detail.png'
  },
  {
    id: 'idc',
    label: 'IDC',
    image: '/home/product/idc.png',
    image_detail: '/home/product/idc_detail.png'
  }
]

// 各类别的产品列表
const categoryProducts = {
  cloud: {
    description: '提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等。',
    link: '/products/notify-sms',
    image_detail: '/home/product/cloud_detail.png',
    products: [
      { 
        label: '通知短信', 
        to: '/products/notify-sms', 
        icon: 'lucide:bell',
        description: '提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知，注册及消费信息确认等。'
      },
      { 
        label: '验证码短信', 
        to: '/products/verify-sms', 
        icon: 'lucide:key',
        description: '为用户提供安全的验证码短信服务，支持登录验证、支付确认、账号注册等场景，确保账户安全。'
      },
      { 
        label: '会员营销短信', 
        to: '/products/marketing-sms', 
        icon: 'lucide:users',
        description: '针对企业会员营销需求，提供精准的营销短信推送服务，支持活动通知、优惠促销、会员关怀等场景。'
      },
      { 
        label: '图片/视频短信', 
        to: '/products/media-sms', 
        icon: 'lucide:image',
        description: '支持发送图片和视频内容的多媒体短信服务，让营销信息更生动，提升用户体验和转化率。'
      },
      { 
        label: '5G短信', 
        to: '/products/5g-sms', 
        icon: 'lucide:zap',
        description: '基于5G技术的新型短信服务，支持富媒体内容、交互式界面，为企业提供更丰富的沟通方式。'
      },
      { 
        label: '语音短信', 
        to: '/products/voice-sms', 
        icon: 'lucide:phone',
        description: '通过语音通话的方式传递信息，适用于重要通知、紧急提醒等场景，确保信息准确传达。'
      },
      { 
        label: '国际短信', 
        to: '/products/intl-sms', 
        icon: 'lucide:globe',
        description: '覆盖全球200多个国家和地区的国际短信服务，为企业的海外业务提供稳定可靠的通讯支持。'
      }
    ]
  },
  iot: {
    description: '提供稳定可靠的物联网卡服务，支持多种流量套餐，覆盖全国范围，为物联网设备提供专业连接服务。',
    link: '/products/iot-card',
    image_detail: '/home/product/iot_detail.png',
    products: [
      { 
        label: '物联网卡', 
        to: '/products/iot-card', 
        icon: 'lucide:wifi',
        description: '提供稳定可靠的物联网卡服务，支持多种流量套餐，覆盖全国范围，为物联网设备提供专业连接服务。'
      }
    ]
  },
  detection: {
    description: '高效的号码检测服务，帮助企业过滤无效号码，降低通讯成本，提升营销效率。',
    link: '/products/empty-number',
    image_detail: '/home/product/detection_detail.png',
    products: [
      { 
        label: '空号检测', 
        to: '/products/empty-number', 
        icon: 'lucide:phone-off',
        description: '快速检测空号、停机号等无效号码，帮助企业降低通讯成本，提升营销效率和精准度。'
      },
      { 
        label: '防骚扰黑名单', 
        to: '/products/blacklist', 
        icon: 'lucide:shield-ban',
        description: '智能过滤投诉用户和黑名单号码，避免骚扰用户，降低投诉风险，保护企业品牌形象。'
      }
    ]
  },
  auth: {
    description: '提供全方位的实名认证服务，确保用户身份真实可靠，满足合规要求。',
    link: '/products/id-verify',
    image_detail: '/home/product/auth_detail.png',
    products: [
      { 
        label: '身份证实名认证', 
        to: '/products/id-verify', 
        icon: 'lucide:credit-card',
        description: '对接公安部权威数据，验证身份证号和姓名的一致性，确保用户身份真实可靠。'
      },
      { 
        label: '身份证人相对比', 
        to: '/products/face-compare', 
        icon: 'lucide:scan-face',
        description: '通过人脸识别技术，对比用户照片与身份证照片，实现活体检测和身份核验。'
      },
      { 
        label: '运营商三要素', 
        to: '/products/mobile-verify', 
        icon: 'lucide:smartphone',
        description: '验证手机号、姓名、身份证号的一致性，确保手机号归属人身份真实有效。'
      },
      { 
        label: '银行卡四要素', 
        to: '/products/bank-verify', 
        icon: 'lucide:wallet',
        description: '验证银行卡号、姓名、身份证号、手机号的一致性，保障金融交易安全。'
      },
      { 
        label: '闪验一键登录SDK', 
        to: '/products/quick-login', 
        icon: 'lucide:log-in',
        description: '基于运营商网关认证，实现一键免密登录，提升用户体验，降低注册流失率。'
      },
      { 
        label: '行为验证码', 
        to: '/products/captcha', 
        icon: 'lucide:puzzle',
        description: '智能行为验证，有效防止机器人攻击，保障业务安全，同时提供良好的用户体验。'
      }
    ]
  },
  risk: {
    description: '专业的业务风控服务，帮助企业防范风险，保障业务安全。',
    link: '/products/liveness',
    image_detail: '/home/product/risk_detail.png',
    products: [
      { 
        label: '活体检测API', 
        to: '/products/liveness', 
        icon: 'lucide:scan',
        description: '通过AI技术识别真人和照片，防止照片、视频等攻击手段，保障实名认证的真实性。'
      },
      { 
        label: 'OCR文字识别', 
        to: '/products/ocr', 
        icon: 'lucide:scan-text',
        description: '支持身份证、银行卡、营业执照等证件的OCR识别，快速提取关键信息，提升业务效率。'
      }
    ]
  },
  idc: {
    description: '面向客户按需提供电信级高端数据中心服务，包括互联网数据中心服务(IDC)、数据中心服务(DC)、灾备中心服务(DRC)。',
    link: '/products/idc',
    image_detail: '/home/product/idc_detail.png',
    products: [
      { 
        label: 'IDC服务', 
        to: '/products/idc', 
        icon: 'lucide:database',
        description: '面向客户按需提供电信级高端数据中心服务，包括互联网数据中心服务(IDC)、数据中心服务(DC)、灾备中心服务(DRC)。'
      },
      { 
        label: 'DCI服务', 
        to: '/products/dci', 
        icon: 'lucide:network',
        description: '提供数据中心互联服务，实现多个数据中心之间的高速互联，保障业务连续性和数据安全。'
      }
    ]
  }
}

// 当前激活类别的产品
const currentProducts = computed(() => categoryProducts[activeCategory.value as keyof typeof categoryProducts])

// 切换类别
const selectCategory = (categoryId: string) => {
  activeCategory.value = categoryId
  // 切换类别时重置选中的产品
  activeProduct.value = null
}

// 选择产品（显示产品描述）
const selectProduct = (product: any) => {
  activeProduct.value = product
}

// 当前显示的描述和链接
const currentDescription = computed(() => {
  if (activeProduct.value) {
    return activeProduct.value.description
  }
  return currentProducts.value.description
})

const currentLink = computed(() => {
  if (activeProduct.value) {
    return activeProduct.value.to
  }
  return currentProducts.value.link
})
</script>

<template>
  <section class="py-16 md:py-10" style="background: linear-gradient(to top right, #dde0ff, #ffffff)">
    <div class="mx-auto px-4 max-w-5xl">
      <!-- 标题和副标题 -->
      <div class="text-center mb-12 md:mb-16">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
          产品介绍
        </h2>
        <p class="text-base md:text-lg text-gray-600">
          我们专业短信领域，赋能未来
        </p>
      </div>

      <!-- 产品类别导航 -->
      <div class="flex flex-wrap justify-around mb-5 md:mb-20">
        <button
          v-for="category in categories"
          :key="category.id"
          @click="selectCategory(category.id)"
          class="flex flex-col items-center gap-1 md:gap-3 group transition-all cursor-pointer"
        >
          <!-- 图片 -->
          <div class="w-8 md:w-10 h-8 md:h-10 md:w-11 md:h-11">
            <img 
              :src="activeCategory === category.id 
                ? category.image.replace('.png', '_select.png') 
                : category.image" 
              :alt="category.label" 
              class="w-full h-full object-contain"
            />
          </div>

          <!-- 标签 -->
          <div class="flex flex-col items-center gap-1">
            <span 
              class="text-[0.6rem] md:text-sm md:text-base font-medium transition-colors"
              :class="activeCategory === category.id 
                ? 'text-[#315EFB]' 
                : 'text-gray-700 group-hover:text-gray-900'"
            >
              {{ category.label }}
            </span>
            <!-- 激活指示器 -->
            <div 
              class="h-0.5 w-12 rounded-full transition-all"
              :class="activeCategory === category.id 
                ? 'bg-[#315EFB]' 
                : 'bg-transparent'"
            />
          </div>
        </button>
      </div>


      <!-- web 端左右排列 左边产品网格  右边产品图片    移动端上下排布, 上面产品图片下面产品网格-->
      <div class="flex flex-col-reverse md:flex-row gap-6">
        <!-- 左侧：产品网格 -->
        <div class="w-full md:w-2/3 flex flex-col items-start justify-center">
          <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
            <button
              v-for="product in currentProducts.products"
              :key="product.to"
              @click="selectProduct(product)"
              class="transition-all group cursor-pointer flex flex-row items-center gap-1 mb-2"
              :class="activeProduct?.to === product.to ? 'opacity-100' : 'opacity-70 hover:opacity-100'"
            >
              <!-- 图标 -->
              <img src="/home/product/subtag.png" alt="产品图标" class="w-4 h-4 md:w-6 md:h-6 object-contain" />
              <!-- 产品名称 -->
              <h3 
                class="text-md ml-1 md:text-lg font-semibold transition-colors text-left"
                :class="activeProduct?.to === product.to ? 'text-primary' : 'text-gray-900 group-hover:text-primary'"
              >
                {{ product.label }}
              </h3>
            </button>
          </div>
            <!-- 描述和按钮 -->
            <div class="text-left max-w-3xl mt-2 flex flex-col">
              <Transition
                enter-active-class="transition-all duration-300 ease-out"
                enter-from-class="opacity-0 translate-y-2"
                enter-to-class="opacity-100 translate-y-0"
                leave-active-class="transition-all duration-200 ease-in"
                leave-from-class="opacity-100 translate-y-0"
                leave-to-class="opacity-0 -translate-y-2"
                mode="out-in"
              >
                <p 
                  :key="activeProduct?.to || 'default'" 
                  class="text-gray-600 text-sm md:text-base mb-6 leading-relaxed"
                >
                  {{ currentDescription }}
                </p>
              </Transition>
                <NuxtLink
                class="self-center md:self-start w-33 h-9 border-1 border-[#4E6EF2] bg-white rounded-[4px] text-sm flex items-center justify-center  text-[#4E6EF2]"
                  :to="currentLink"
                  target="_blank"
                >
                  了解详情
                </NuxtLink>
            </div>
        </div>
        
        <!-- 右侧：产品图片 -->
        <div class="w-full flex justify-center md:w-1/3">
          <Transition
            enter-active-class="transition-all duration-500 ease-out"
            enter-from-class="opacity-0 -translate-x-8"
            enter-to-class="opacity-100 translate-x-0"
            leave-active-class="transition-all duration-300 ease-in"
            leave-from-class="opacity-100 translate-x-0"
            leave-to-class="opacity-0 translate-x-8"
            mode="out-in"
          >
            <img 
              :key="activeCategory"
              :src="currentProducts.image_detail" 
              alt="产品图片" 
              class="w-60 md:w-full h-auto object-contain rounded-xl"
            />
          </Transition>
        </div>
      </div>


    </div>
  </section>
</template>